<template>
	<view class="pageV">
		<u-navbar title="绑定手机号" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#00000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<image src="../static/topIv.png" class="topIv" mode="aspectFill"></image>
		<view class="tv1">绑定手机号</view>
		<view class="tv2">以免错过课程提醒和通知</view>
		<view class="inputV">
			<view class="phoneInput">
				<u--input color="#fff" placeholderStyle="color:#8d8d8d" fontSize="32rpx" placeholder="请输入手机号"
					border="none" type="number" v-model="code"></u--input>
			</view>
			<view class="line"></view>
			<view class="codeInput">
				<u--input color="#fff" placeholderStyle="color:#8d8d8d" fontSize="32rpx" placeholder="请输入验证码"
					border="none" type="number" v-model="code"></u--input>
				<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
				<view class="getCodeView" @tap="getCode">{{tips}}</view>
			</view>
		</view>
		<view class="tv3"></view>
		<view class="tv4">确认</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				code: '',
				seconds: 60,
				tips: '',
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				// if (this.phoneInput.length == 0 || this.phoneInput.length != 11) {
				// 	uni.$u.toast("请输入正确手机号")
				// 	return
				// }
				if (this.$refs.uCode.canGetCode) {
					this.$refs.uCode.start();
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					// this.$api.getSmsCode({
					// 	phone: this.phoneInput,
					// 	type: "register" //业务类型: 注册->register;修改密码->updatePwd;修改手机号->updatePhone
					// }).then((res) => {
					// 	uni.hideLoading();
					// 	this.$refs.uCode.start();
					// }).catch((e) => {
					// 	uni.hideLoading();
					// 	uni.$u.toast(e.msg === undefined ? "获取失败" : e.msg)
					// })
				}
			},
		}
	}
</script>

<style lang="scss">
	.pageV {
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		min-height: 100vh;
		justify-content: center;
		align-items: center;
	}
	
	.topIv{
		width: 100%;
		height: 370rpx;
		position: absolute;
		top: 0;
	}

	.tv1 {
		font-size: 36rpx;
		color: #fff;
		margin-top: 60rpx;
	}

	.tv2 {
		font-size: 32rpx;
		color: #8D8D8D;
		margin-top: 17rpx;
	}

	.inputV {
		width: 90%;
		background: #1F1F1F;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		margin-top: 95rpx;
		
		.phoneInput{
			height: 152rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}

		.line {
			height: 1rpx;
			background-color: #393939;
		}

		.codeInput {
			height: 152rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-left: 40rpx;
			margin-right: 40rpx;

			.getCodeView {
				font-family: 'Alibaba PuHuiTi 2.0';
				font-style: normal;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 40rpx;
				text-align: center;
				color: #8d8d8d;
			}
		}
	}

	.tv3 {
		flex: 1;
	}

	.tv4 {
		width: 90%;
		background: #333333;
		border-radius: 10rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
		font-size: 32rpx;
		color: #8D8D8D;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
